<template>
  <view class="container">
    <top-back-navbar position="fixed" title="收货地址" background="#6A41EA" color="#ffff"></top-back-navbar>

    <view class="content">
      <view class="content_box">
        <view class="u-f-ac input_item">
          <view class="titles">收货人</view>
          <view class="inputs">
            <input @input="realname" placeholder="请填写收货人姓名" :value="res.realname" height="50"
              placeholder-style="color: #bbb;fontSize: 30rpx;">
            </input>
          </view>
        </view>
        <view class="u-f-ac input_item">
          <view class="titles">联系电话</view>
          <view class="inputs">
            <input @input="mobile" placeholder="请填写联系电话" :value="res.mobile" height="50"
              placeholder-style="color: #bbb;fontSize: 30rpx;">
            </input>
          </view>
        </view>
        <view class="u-f-ac input_item">
          <view class="titles">所在地区</view>
          <view class="inputs">
            <input placeholder="请选择所在地区" @click="showMulLinkageThreePicker" disabled :value="address" height="50"
              placeholder-style="color: #bbb;fontSize: 30rpx;">
            </input>
          </view>
        </view>
        <view class="u-f-ac input_item">
          <view class="titles">所在街道</view>
          <view class="inputs">
            <input @input="street" placeholder="所在街道" :value="res.street" height="50"
              placeholder-style="color: #bbb;fontSize: 30rpx;">
            </input>
          </view>
        </view>
        <view class="input_item">
          <view class="titles">详细地址</view>
          <view class="inputs">
            <input @input="addr" placeholder="街道,楼牌号等" :value="res.address" height="50"
              placeholder-style="color: #bbb;fontSize: 30rpx;">
            </input>
          </view>
        </view>


      </view>

	<view style="padding: 80rpx 30rpx;">
		<button type="primary" style="background-color: #6A41EA; width:100%;border-radius: 60rpx;"
			@click="sub">确定</button>
	</view>
    </view>

    <mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength"
      :pickerValueDefault="pickerValueDefault" @onConfirm="onConfirm" @onCancel="onCancel"
      :pickerValueArray="pickerValueArray"></mpvue-picker>
    <mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
      @onCancel="onCancel" @onConfirm="onConfirm"></mpvue-city-picker>
  

  </view>
</template>
<script>
  import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
  import mpvueCityPicker from '../../../components/mpvue-citypicker/mpvueCityPicker.vue'
  import cityData from '../../../common/city.data.js';
  import city from '../../../components/mpvue-citypicker/city-data/city.js';
  import area from '../../../components/mpvue-citypicker/city-data/area.js';
  import province from '../../../components/mpvue-citypicker/city-data/province.js';
  import asd from '../../../components/mpvue-citypicker/city-data/asd.js';

  export default {
    components: {
      mpvuePicker,
      mpvueCityPicker
    },
    data() {
      return {
        res: [],
        mulLinkageTwoPicker: cityData,
        city: city,
        area: area,
        asd: asd,
        province: province,
        cityPickerValueDefault: [0, 0, 0],
        themeColor: '#007AFF',
        pickerText: '',
        mode: '',
        deepLength: 1,
        pickerValueDefault: [0],
        pickerValueArray: [],
        address: '-请选择地区-',
        datavalue: '',
        submit: {},
        openid: '',
        goodsid: '',
        optionid: '',
        total: '',
      };
    },
    onLoad: function(e) {
      console.log(e)
      this.total = e.total
      this.goodsid = e.goodsid
      this.optionid = e.optionid
      if (e.id != 'undefined' && e.id != undefined) {
        uni.showLoading()
        uni.setNavigationBarTitle({
          title: '编辑地址'
        })
        this.id = e.id
        uni.getStorage({
          key: 'openid',
          success: (res) => {
            this.openid = res.data
            this.setAjax()
          },
          fail: () => {
            uni.navigateTo({
              url: '../../login/login'
            });
          }
        });
      } else {
        uni.getStorage({
          key: 'openid',
          success: (res) => {
            this.openid = res.data
          },
          fail: () => {
            uni.navigateTo({
              url: '../../login/login'
            });
          }
        });
      }
    },
    methods: {
      setAjax() {
        uni.request({
          url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.address.post&app=1&id=' +
            this.id,
          method: 'POST',
          data: {
            'openid': this.openid
          },
          header: {
            'Content-Type': 'application/x-www-form-urlencoded'
          },
          success: res => {
            uni.hideLoading()
            this.res = res.data
            this.address = this.res.province + '-' + this.res.city + '-' + this.res.area
            this.submit.realname = res.data.realname
            this.submit.mobile = res.data.mobile
            this.submit.address = res.data.address
            this.submit.areas = res.data.province + ' ' + res.data.city + ' ' + res.data.area
            this.submit.street = res.data.street
            this.submit.datavalue = res.data.datavalue
          },
          fail: () => {},
          complete: () => {}
        });
      },
      onCancel(e) {},
      showMulLinkageThreePicker() {
        this.$refs.mpvueCityPicker.show()
      },
      onConfirm(e) {
        this.address = e.label
        var pro = e.value[0]
        var city = e.value[1]
        var area = e.cityCode
        this.submit.datavalue = this.province[pro].value + '0000 ' + this.city[pro][city].value + '00 ' + area
        var a = e.label.split("-")
        a = a[0] + ' ' + a[1] + ' ' + a[2]
        this.submit.areas = a
      },
      sub() {
        var id = ''
        if (this.id != undefined) {
          id = '&id=' + this.id
        }
        if (this.submit.realname == undefined) {
          uni.showToast({
            title: '请输入收货人',
            icon: "none"
          });
        } else if (this.submit.mobile == undefined) {
          uni.showToast({
            title: '请输入联系电话',
            icon: "none"
          });
        } else if (this.submit.address == undefined) {
          uni.showToast({
            title: '请选择城市',
            icon: "none"
          });
        } else if (this.submit.areas == undefined) {
          uni.showToast({
            title: '请输入街道',
            icon: "none"
          });
        } else if (this.submit.street == undefined) {
          uni.showToast({
            title: '请输入街道',
            icon: "none"
          });
        } else {
          uni.showLoading()
          uni.request({
            url: this.$BASE_URL+'/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=member.address.submit&app=1' +
              id,
            method: 'POST',
            data: {
              'openid': this.openid,
              'addressdata[realname]': this.submit.realname,
              'addressdata[mobile]': this.submit.mobile,
              'addressdata[address]': this.submit.address,
              'addressdata[areas]': this.submit.areas,
              'addressdata[street]': this.submit.street,
              'addressdata[datavalue]': this.submit.datavalue
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: res => {
              uni.hideLoading()
              if (res.data.status == 1) {
                uni.showToast({
                  title: '保存成功'
                });
                if (this.goodsid) {
                  setTimeout(() => {
                    // uni.navigateBack();
                    uni.navigateTo({
                      url: '../../order/create/create?id=' + this.goodsid + 'optionid=' + this.optionid +
                        'total=' + this.total
                    });
                  }, 1500);
                } else {
                  uni.navigateTo({
                    url: './address'
                  });
                }
              }
            },
            fail: () => {},
            complete: () => {}
          });
        }
      },
      realname(e) {
        this.submit.realname = e.detail.value
      },
      mobile(e) {
        this.submit.mobile = e.detail.value
      },
      addr(e) {
        this.submit.address = e.detail.value
      },
      street(e) {
        this.submit.street = e.detail.value

      }
    },
    onBackPress() {
      if (this.$refs.mpvuePicker.showPicker) {
        this.$refs.mpvuePicker.pickerCancel();
        return true;
      }
      if (this.$refs.mpvueCityPicker.showPicker) {
        this.$refs.mpvueCityPicker.pickerCancel();
        return true;
      }
    },
    onUnload() {
      if (this.$refs.mpvuePicker.showPicker) {
        this.$refs.mpvuePicker.pickerCancel()
      }
      if (this.$refs.mpvueCityPicker.showPicker) {
        this.$refs.mpvueCityPicker.pickerCancel()
      }
    }
  }
</script>

<style lang="scss">
	page {
	  background-color: #f2f5fa;
	}
	.container {
	  width: 100%;
	  height: 100vh;
	  ;
	  box-sizing: border-box;
	}
  .content {
   padding:30rpx;
  }

  .content_box {
    border-radius: 30rpx;
	box-shadow: 0px 2px 8px 3px rgba(235,235,235,0.4);;
	padding: 0 30rpx;
	background-color: #fff;
    .input_item {
      color: #333;
      height: 90rpx;
		
      .titles {
        width: 120rpx;
        // background-color: skyblue;
        margin-right: 30rpx;
      }

      /deep/ .u-input__input {
        color: #333 !important;
      }
    }

  }
  .u-f-ac{
	  border-bottom:1px solid #f2f5fa;
  }
</style>
